<template>
  <div>
    <div class="bar-item " :class="{ active: index === isActive}" v-for="(item,index) in barArray" :key="index"
         @click="changeBar(index, item.path)">
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    barArray: {
      type: Array,
      default () {
        return []
      }
    }
  },
  name: 'NavBar',
  data () {
    return {
      isActive: 0
    }
  },
  methods: {
    changeBar (index, path) {
      this.isActive = index
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>
.bar-item {
  width: 70px;
  height: 30px;
  margin-top: 5px;
  margin-right: 8px;
  text-align: center;
  display: inline-block;
  line-height: 30px;
  border: 1px #b6b6b6 solid;
  border-radius: 3px;
}

.active {
  border: 1px #6e6e6e solid;
  color: #3070e3;
}
</style>
